import { Table, Button, Select, Descriptions, Row, Col, DatePicker, message, Typography } from 'antd';
import { getSecurityCardPayMentList } from '@/services/cardinfor';
import styles from './index.less';
import { file } from '@babel/types';
import auth from '@/utils/auth';

const { Text } = Typography;
const { Option } = Select;
const optionInsure = [
    {
        name: '养老',
        value: '01'
    },
    {
        name: '失业',
        value: '02'
    },
    {
        name: '医疗',
        value: '03'
    },
    {
        name: '工伤',
        value: '04'
    },
    {
        name: '生育',
        value: '05'
    },
    {
        name: '大病险',
        value: '06'
    },
    {
        name: '残疾人保障金',
        value: '07'
    },
]

class InsureDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataInsure: [],
            params: {},
            loading: false
        }
    }
    setLoading(loading) {
        this.setState({
            loading
        })
    }
    contextLoading(value, setLoading) {
        setLoading.call(this, value);
    }
    changeInsure(val) {
        const { params } = this.state;
        params['type'] = val;
        this.setState({
            params: { ...params }
        })
    }
    changeYear(val) {
        const { params } = this.state;
        params['year'] = val && val.format && val.format('YYYY');
        this.setState({
            params: { ...params }
        })
    }
    contextChange(val, strategy) {
        strategy.call(this, val);
    }
    async handleRequest(params) {
        try {
            this.contextLoading(true, this.setLoading);
            const responseData = await getSecurityCardPayMentList(params);
            this.contextLoading(false, this.setLoading);
            if (responseData.code === '000000') {
                this.setState({
                    dataInsure: responseData.data
                })
            } else if (responseData.message) {
                message.error(responseData.message);
            }
        } catch (e) {
            return e;
        }

    }
    handleValidate() {
        const validateStrategy = {
            nonempty(text) {
                const re = /\S/;
                if (auth.isDef(text) && re.exec(text)) {
                    return true;
                }
                return false;
            }
        };
        const showMessage = function (msg) {
            message.error(msg);
        }
        const handleValidateField = function (validateFields) {
            let invalid = true;
            let data = {};
            let msg = ''
            validateFields.forEach((field) => {
                invalid = invalid ? validateStrategy.nonempty(field.value) : false;
                if (invalid === false && field.rules.required && msg === '') {
                    msg = field.rules.msg;
                    showMessage(msg);
                }
                data[field.name] = field.value || '';
            })
            return [invalid, data];
        }
        return function (validateFields) {
            let [validateError, validateRes] = handleValidateField(validateFields);
            return [validateError, validateRes];
        }
    }
    async handleSearch(accountId) {
        const { params } = this.state;
        const validateFields = [
            {
                value: params.type,
                name: 'type',
                rules: { required: true, msg: '请选择缴纳保险类型' }
            },
            {
                value: params.year,
                name: 'year',
                rules: { required: true, msg: '请选择缴纳保险年份' }
            }
        ];
        const [validateError, validateRes] = this.handleValidate()(validateFields);
        if (validateError === false) return;
        this.handleRequest({ accountId, ...validateRes })
    }
    render() {
        const { dataInsure, loading } = this.state;
        const { accountDetail } = this.props;
        const columns = [
            {
                title: '险种',
                dataIndex: 'insuranceName',
                width: '4%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>险种</Text>
                }
            },
            {
                title: '年份',
                dataIndex: 'payYearMonth',
                width: '7%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>年份</Text>
                }
            },
            {
                title: '状态',
                dataIndex: 'payType',
                width: '3%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>状态</Text>
                }
            },
            {
                title: '基数',
                dataIndex: 'payBase',
                width: '5%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>基数</Text>
                }
            },
            {
                title: '个人缴费',
                dataIndex: 'payPersonal',
                width: '5%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>个人缴费</Text>
                }
            },
            {
                title: '单位缴费',
                dataIndex: 'payCompany',
                width: '5%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>单位缴费</Text>
                }
            },
            {
                title: '划入个人账户',
                dataIndex: 'accountAddMoney',
                width: '5%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>划入个人账户</Text>
                }
            },
            {
                title: '缴纳公司',
                dataIndex: 'payCompanyName',
                width: '10%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>缴纳公司</Text>
                }
            },
            {
                title: '地区',
                dataIndex: 'payArea',
                width: '6%',
                title: (sortOrder) => {
                    return <Text className={styles['special-text']}>地区</Text>
                }
            },
        ]
        return <div className={styles.modalCont}>
            <Row>
                <Col span={5}>是否主卡：<span className={styles['special-text']}>{accountDetail.isMainAccount > 0 ? '是' : '否'}</span></Col>
                <Col span={5}>绑卡状态：<span className={styles['special-text']}>{accountDetail.securityState}</span></Col>
                <Col span={7}>绑卡时间：<span className={styles['special-text']}>{accountDetail.boundTime}</span></Col>
                <Col span={7}>更新时间：<span className={styles['special-text']}>{accountDetail.lastRefreshDate}</span></Col>
            </Row>
            <Descriptions>
                <Descriptions.Item>
                    <Row>
                        <Col span={10}>用户ID</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.userId}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>姓名：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.name}</Col>
                    </Row>
                    {/* <Row>
                        <Col span={10}>年龄：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.f}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>性别：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.f}</Col>
                    </Row> */}
                    <Row>
                        <Col span={10}>医保卡：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.securityAccount}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>养老账户：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.pensionAccountBalance}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>医疗账户：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.medicalAccountBalance}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>缴费基数：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.payBase}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>缴费公司：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.payCompanyName}</Col>
                    </Row>
                    <Row>
                        <Col span={10}>状态：</Col>
                        <Col span={14} className={styles['special-text']}>{accountDetail.status > 0 ? '正常' : '已解绑'}</Col>
                    </Row>
                </Descriptions.Item>
                <Descriptions.Item >
                    <Row>
                        <Col span={24}>
                            <Row style={{ paddingTop: '10px', paddingBottom: '10px' }} >
                                <Col span={8}>
                                    <Select style={{ width: 175 }} placeholder="请选择" allowClear={true} onChange={(e) => this.contextChange(e, this.changeInsure)}>
                                        {
                                            optionInsure.map(function (item) {
                                                return <Option value={item.value} key={item.name}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </Col>
                                <Col span={8}>
                                    <DatePicker picker="year" format="YYYY" onChange={(e) => this.contextChange(e, this.changeYear)} />
                                </Col>
                                <Col span={8}>
                                    <Button type="primary" onClick={() => this.handleSearch(accountDetail.id)} loading={loading}>查询</Button>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                    <Table bordered={true} columns={columns} dataSource={dataInsure} size="small" scroll={{ y: 400 }} rowKey={(record) => record.payYearMonth} />
                </Descriptions.Item>
            </Descriptions>
        </div>
    }
}
export default InsureDetail;